<template>
  <div class="app">
      <el-container>
        <el-aside width="255px">
          <div class="left">
            <div class="logo">
              <h2 class="text">Fabric</h2>
            </div>

            <div class="leftMain">
              <el-row class="tac" :collapse="isCollapse">
                  <el-col :span="12" >
                    <el-menu
                      default-active="2"
                      class="el-menu-vertical-demo">
                      <el-submenu index="1">
                        <template slot="title">
                          <el-button type="primary"  class="left-menu">开放网络</el-button>
                        </template>
                        <el-menu-item-group>

                          <el-menu-item index="1-1" class="left-1">概述</el-menu-item>

                        </el-menu-item-group>

                      </el-submenu>

                      <el-submenu  index="2">
                        <template slot="title">
                          <el-button type="primary"  class="left-menu">可信存证</el-button>
                        </template>
                        <el-menu-item-group>

                          <el-menu-item index="2-1" class="left-1">概述</el-menu-item>
                        
                          <router-link :to="{path:'/ceshi/exsitsurvey'}"><el-menu-item index="2-2" class="left-1">出证</el-menu-item></router-link>
                          <router-link :to="{path:'/ceshi/exsiting'}"> <el-menu-item index="2-3" class="left-1">存证</el-menu-item></router-link>
                        </el-menu-item-group>

                      </el-submenu>
                      <el-submenu  index="3">
                        <template slot="title">
                          <el-button type="primary"  class="left-menu">藏品交易</el-button>
                        </template>

                        <el-menu-item-group>
                         <router-link :to="{path:'/ceshi/buy'}"><el-menu-item index="3-2" class="left-1">交易</el-menu-item></router-link>
                         <router-link :to="{path:'/ceshi/frame'}"> <el-menu-item index="3-3" class="left-1">发行</el-menu-item></router-link>
                         <router-link :to="{path:'/ceshi/myassets'}"><el-menu-item index="3-2" class="left-1">我的资产</el-menu-item></router-link>
                        </el-menu-item-group>
                      </el-submenu>
                      <el-submenu index="4">
                        <template slot="title">
                          <el-button type="primary"  class="left-menu">版权保护</el-button>
                        </template>
                        <el-menu-item-group>
                          <router-link :to="{path:'/ceshi/copyrightprotect'}"><el-menu-item index="1-1">鉴权与保护</el-menu-item></router-link>
                          
                        </el-menu-item-group>
                       
                      </el-submenu>
                      <el-submenu index="5">
                        <template slot="title">
                          <el-button type="primary"  class="left-menu">技术概述</el-button>
                        </template>

                        <el-menu-item-group>

                          <el-menu-item index="1-1">概述</el-menu-item>
                        </el-menu-item-group>
                      </el-submenu>
                    </el-menu>
                  </el-col>
              </el-row>

            </div>
          </div>
        </el-aside>
        <el-main>
            <router-view></router-view>
            <!-- <button @click="add">发布藏品</button> -->
              <!-- 动态发布资产 -->
            <!-- <div class="parameter">
              <input type="text" v-model="assetpara.id">
              <input type="text" v-model="assetpara.owner">
              <input type="text" v-model="assetpara.allowance">
              <input type="text" v-model="assetpara.name">
              <input type="text" v-model="assetpara.appraisedvalue">
            </div>    -->
             <!--通过assetid去查询资产  -->
             <!-- <div class="getassetbyid">
              资产id去查询: <input type="text" v-model="assetpara.id">
              <button @click="querybyid">查询资产通过id </button>
             </div> -->

             <!--  我的资产-->
             <!-- <button @click="querymyassets">查询我的资产</button>
             <div>{{ datas }}</div> -->
             <!-- 藏品删除 -->
             <!-- <button @click="deleteassets">藏品的删除</button>
             id删除: <input type="text" v-model="assetpara.id"> -->

        </el-main>
      </el-container>
  </div>
</template>

<script>
import axios from 'axios';
import test from '../../../test01/src/components/test.vue';
export default {
  components: { test },
    name:'ceshi',
    data() {
        return {
          // 展开收起
          isCollapse: true,    
  
          // 资产传递参数 
          assetpara:{
            id:'',
            owner:'',
            allowance:'',
            name:'',
            appraisedvalue:'',
          },
          datas:'',
        };
    },
    methods: {
      add(){

        // 打印测试值 id为例
        console.log(this.assetpara.id);

        var datamain = JSON.stringify({
          "id":this.assetpara.id,
          "owner":this.assetpara.owner,
          "allowance":this.assetpara.allowance,
          "name":this.assetpara.name,
          "appraisedvalue":this.assetpara.appraisedvalue
          })
        axios({
                method:"POST",
                url:"http://hatelys.vipgz1.91tunnel.com/operate/submitallasset",
                data:datamain,
                headers:{
                    'Content-Type':'application/json;charset=UTF-8',
                    'Authorization':'Bearer '+localStorage.getItem('token')
                },
            }).then(resp=>{ 
              console.log(resp);
                // 成功
                if(resp.data.code == 200){
                  console.log(resp);
                  // 数据分析
                  // 假如前端数据为空字符串 那么我们直接渲染余量为0
                  if(resp.data.data == ''){
                    this.assetpara.allowance='0';
                    console.log(this.allowance);
                  }
                  // 遍历data数据
                  else {
                    console.log(resp.data.data);
                  }
                }
            })
      },
      querybyid(){
        axios({
                method:"GET",
                url:"http://hatelys.vipgz1.91tunnel.com/operate/querybyassetid/"+this.assetpara.id,
                headers:{
                    'Content-Type':'application/json;charset=UTF-8',
                    'Authorization':'Bearer '+localStorage.getItem('token')
                },
            }).then(resp=>{ 
              console.log(resp);
                // 成功
                if(resp.data.code == 200){
                  console.log(resp);
                  // 数据分析
                  // 假如前端数据为空字符串 那么我们直接渲染余量为0
                  if(resp.data.data == ''){
                    this.assetpara.allowance='0';
                    console.log(this.allowance);
                  }
                  // 遍历data数据
                  else {
                    console.log(resp.data.data);
                  }
                }
            })
      },
      querymyassets(){
        axios({
                method:"GET",
                url:"http://hatelys.vipgz1.91tunnel.com/operate/queryallasset/",
                headers:{
                    'Content-Type':'application/json;charset=UTF-8',
                    'Authorization':'Bearer '+localStorage.getItem('token')
                },
            }).then(resp=>{ 
                // 成功
                if(resp.data.code == 200){
                  // 显示界面
                  resp.data.data = this.datas
                }
            })
      },
      deleteassets(){
        axios({
                method:"delete",
                url:"http://hatelys.vipgz1.91tunnel.com/operate/deleteasset/",
                headers:{
                    'Content-Type':'application/json;charset=UTF-8',
                    'Authorization':'Bearer '+localStorage.getItem('token')
                },
                params:{
                  "assetid":this.assetpara.id
                }
            }).then(resp=>{ 
                // 成功
                console.log(resp);
                // if(resp.data.code == 200){
                //   // 显示界面
                //   resp.data.data = this.datas
                // }
            })
      }
    },
    beforeMount(){
      // console.log(localStorage.getItem("token"));
      // 发送用户数据请求
      axios({
                method:"get",
                url:"http://hatelys.vipgz1.91tunnel.com/operate/queryallasset",
                headers:{
                    'Content-Type':'application/json;charset=UTF-8',
                    'Authorization':'Bearer '+localStorage.getItem('token')
                }
            }).then(resp=>{ 
              console.log(resp);
                // 成功
                if(resp.data.code == 200){
                  // 数据分析
                  // 假如前端数据为空字符串 那么我们直接渲染余量为0
                  if(resp.data.data == ''){
                    this.allowance=0;
                    this.hascernum = 0;
                    console.log(this.allowance);
                  }
                  // 遍历data数据
                  else {
                    console.log(resp.data.data);
                  }
                }
            })
    }
}
</script>

<style>
*{
  margin: 0px;
  padding: 0px;
}
a {
  text-decoration: none;
}
/* 布局 */
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  /* 侧边栏 */
  .el-aside {
    /* background-color: #D3DCE6;
    color: #333;
    text-align: center; */
    /* line-height: 200px; */
    width: 255px;
    overflow: hidden;
    opacity: 1;
    background: rgba(43, 45, 55, 0.01);
  }
  /* 侧边栏导航修饰 */
  .tac{
    width: 510px;
    height: 100%;
  }
  
  /* 展开收起 */
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    /* text-align: center; */
    /* line-height: 75px; */
    height: 100%;
  }
  
  body > .el-container {
    margin-bottom: px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  /* 主体css */
    .menu{
        left: 30px;
        top: 35px;
        width: 100px;
        height: 20px;
        opacity: 1;
        /** 文本1 */
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 1.17px;
        line-height: 0px;
        color: rgba(116, 121, 140, 1);
        text-align: left;
        vertical-align: top;
        margin: 20px 0 0 30px;
    }
    .showMain{
      height: 1020px;
      width: 100%;
    }
    .form1{
        left: 321px;
        top: 139px;
        width: 339px;
        height: 200px;
        opacity: 1;
        border-radius: 5px;
        background: rgba(255, 255, 255, 1);
        position: absolute;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
		.form2{
			left: 848px;
			top: 139px;
			width: 339px;
			height: 200px;
			opacity: 1;
			border-radius: 5px;
			background: rgba(255, 255, 255, 1);
			position: absolute;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
		}
		.btn1{
			left: 212.5px;
			top: 16.46px;
			width: 99px;
			height: 38px;
			opacity: 1;
			background: rgba(255, 255, 255, 1);
			position: absolute;
		}
		.btn2{
			left: 212.5px;
			top: 16.46px;
			width: 99px;
			height: 38px;
			opacity: 1;
			background: rgba(255, 255, 255, 1);
			position: absolute;
		}
	
    .text-2{
			left: 30px;
			top: 35px;
			width: 60px;
			height: 20px;
			opacity: 1;
			/** 文本1 */
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 1.17px;
			line-height: 0px;
			color: rgba(116, 121, 140, 1);
			text-align: left;
			vertical-align: top;
		}

    .text-1{
			left: 30px;
			top: 35px;
			width: 60px;
			height: 20px;
			opacity: 1;
			/** 文本1 */
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 1.17px;
			line-height: 0px;
			color: rgba(116, 121, 140, 1);
			text-align: left;
			vertical-align: top;
			position: absolute;
		}
    /* 概述 */
    .summary{
      /* letter-spacing: 0px; */
      line-height: 30px;
      font-size: 18px;
      font-weight: 300;
      color: rgba(40, 45, 48, 1);
      text-align: left;
      vertical-align: top;
      margin: 20px 0 0 30px;
    }

    /* 侧边栏 */
    .left-menu {
      left: 0px;
      top: 0px;
      width: 195px;
      height: 50px;
      opacity: 1;
      border-radius: 8px;
      background: rgba(0, 84, 254, 1);
      margin-left: 20px;
      text-align: center;
      margin-bottom: 20px;
      /* 投影 */
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .text4 {
      left: 62px;
      top: 25px;
      width: 58px;
      height: 17px;
      opacity: 1;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 44px;
      color: rgba(255, 255, 255, 1);
      vertical-align: top;
    }

    .logo {
      left: 0px;
      top: 0px;
      width: 100%;
      height: 70px;
      opacity: 1;
      margin: 20px 40px;
    }
    .text {
      left: 87px;
      top: 15px;
      width: 82px;
      height: 41px;
      opacity: 1;
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 0px;
      line-height: 80px;
      color: rgba(112, 112, 112, 1);
      text-align: left;
      vertical-align: top;
    }
</style>